<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>用户列表</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="lib/layui/css/layui.css">
    <link rel="stylesheet" href="css/scroll-bar.css">
    <link rel="stylesheet" href="css/sub-page.css">
    <link rel="stylesheet" href="css/font.css">
    <link rel="stylesheet" href="lib/nprogress/nprogress.css">
</head>

<body>
    <div class="ok-body">
        <!--面包屑导航区域-->
        <div class="ok-body-breadcrumb">
            <span class="layui-breadcrumb">
                <a><cite>首页</cite></a>
                <a><cite>系统管理</cite></a>
                <a><cite>用户列表</cite></a>
            </span>
            <a class="layui-btn layui-btn-small" href="javascript:location.replace(location.href);" title="刷新">
                <i class="layui-icon layui-icon-refresh"></i>
            </a>
        </div>
        <!--模糊搜索区域-->
        <div class="layui-row ok-search">
            用户名：
            <div class="layui-inline">
                <input class="layui-input" name="id" id="username" autocomplete="off" placeholder="请输入用户名">
            </div>
            <button class="layui-btn" data-type="reload" id="search">搜索</button>
        </div>
        <!--工具栏-->
        <okToolbar>
            <!--   <button class="layui-btn layui-btn-normal" id="batchEnabled">
                <i class="iconfont icon-shangsheng"></i>批量启用
            </button>
            <button class="layui-btn layui-btn-warm" id="batchDisabled">
                <i class="iconfont icon-web-icon-"></i>批量停用
            </button>
            <button class="layui-btn layui-btn-danger" id="batchDel">
                <i class="layui-icon layui-icon-delete"></i>批量删除
            </button> -->
            <button class="layui-btn" id="addUser">
                <i class="layui-icon">&#xe61f;</i>添加用户
            </button>
            <span>共有数据：<i id="countNum">0</i> 条</span>
        </okToolbar>
        <!--数据表格-->
        <table class="layui-hide" id="tableId" lay-filter="tableFilter"></table>
    </div>
    <!--js逻辑-->
    <script src="lib/layui/layui.js"></script>
    <script src="lib/nprogress/nprogress.js"></script>
    <script>
        NProgress.start();
    window.onload = function () {
        NProgress.done();
    }
    layui.use(['element', 'table', 'form', 'jquery'], function () {
        var element = layui.element;
        var table = layui.table;
        var form = layui.form;
        var $ = layui.jquery;

        table.render({
            elem: '#tableId',
            url: '/users/list',
            limit: 10,
            cellMinWidth: 80,
            page: true,
            id:'userlist',
            cols: [[
                {field: 'userid', title: 'ID', width: 80, sort: true},
                {field: 'truename', title: '真实姓名'},
                {field: 'username', title: '用户名'},
                {field: 'password', title: '密码'},
                {field: 'status', title: '状态', width: 85, templet: '#statusTpl'},
                {field: 'createat', title: '创建时间'},
                {title: '操作', templet: '#operationTpl', align: 'center'}
            ]],
            done: function (res, curr, count) {
                $("#countNum").text(count);
            }
        });

        var active = {
            reload: function(){
                var username = $('#username');
                
                //执行重载
                table.reload('userlist', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                    ,where: {
                        key: username.val()
                    }
                });
            }
        };

        $('#search').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });
        $('#username').on('keydown',function(e){
            if(e.keyCode=='13'){
                $('#search').click();
            }
        });

        table.on('tool(tableFilter)', function (obj) {
            var data = obj.data;
            delete data.password;
            var layEvent = obj.event;
            if (layEvent === 'permission') {
                layer.open({
                    title: '权限设置',
                    type: 2,
                    shade: false,
                    maxmin: true,
                    shade: 0.5,
                    area: ['90%', '90%'],
                    content: '/users/permission',
                    zIndex: layer.zIndex,
                    end: function () {
                        $(".layui-laypage-btn")[0].click();
                    },
                    success:function(layero, index){
                        var body = layer.getChildFrame('body', index);
                        var iframeWin = window[layero.find('iframe')[0]['name']]; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
                        //console.log(body.html()) //得到iframe页的body内容
                        //console.log(body.find('#guestid').val());
                        body.find('#guestid').val(data.userid);
                        console.log(body.find('#guestid').val());
                    }
                });
            } else if (layEvent === 'resetpassword') {
                layer.confirm("确定要重置密码吗？", {skin: 'layui-layer-lan', icon:3, title: '提示', anim: 6}, function () {
                    //layer.msg("操作成功！", {icon: 1, time: 1000});
                    $.ajax({
                        url: '/users/resetpassword',
                        method: 'post',
                        data: data,
                        dataType: 'JSON',
                        success: function (res) {
                            if (res.code == 1) {
                                layer.open({
                                    title: '操作成功', 
                                    content: "重置的帐号新密码为："+res.password
                                });

                                //layer.msg("操作成功！", {icon: 1, time: 1});
                            } else {
                                layer.msg("操作失败！", {icon: 2, time: 1000});
                            }
                        },
                        error: function (data) {}
                    })
                });
            }
        });
/*
        $("#batchEnabled").click(function () {
            layer.confirm("确定要批量启用吗？", {skin: 'layui-layer-lan', icon: 3, title: '提示', anim: 1}, function () {
                var checkStatus = table.checkStatus('userlist');
                var rows = checkStatus.data.length;
                if (rows > 0) {
                    var idsStr = "";
                    for (var i = 0; i < checkStatus.data.length; i++) {
                        idsStr += checkStatus.data[i].userid + ',';
                    }
                    console.log("选择的id-->" + idsStr);
                    layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
                        $(".layui-laypage-btn")[0].click();
                    });
                } else {
                    layer.msg('未选择有效数据', {
                        offset: 't',
                        anim: 6
                    });
                }
            });
        })

        $("#batchDisabled").click(function () {
            layer.confirm("确定要批量停用吗？", {skin: 'layui-layer-lan', icon: 3, title: '提示', anim: 2}, function () {
                var checkStatus = table.checkStatus('userlist');
                var rows = checkStatus.data.length;
                if (rows > 0) {
                    var idsStr = "";
                    for (var i = 0; i < checkStatus.data.length; i++) {
                        idsStr += checkStatus.data[i].userid + ',';
                    }
                    console.log("选择的id-->" + idsStr);
                    layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
                        $(".layui-laypage-btn")[0].click();
                    });
                } else {
                    layer.msg('未选择有效数据', {
                        offset: 't',
                        anim: 6
                    });
                }
            });
        })

        $("#batchDel").click(function () {
            layer.confirm("确定要批量删除吗？", {skin: 'layui-layer-lan', icon: 2, title: '提示', anim: 6}, function () {
                var checkStatus = table.checkStatus('userlist');
                var rows = checkStatus.data.length;
                if (rows > 0) {
                    var idsStr = "";
                    for (var i = 0; i < checkStatus.data.length; i++) {
                        idsStr += checkStatus.data[i].userid + ',';
                    }
                    console.log("选择的id-->" + idsStr);
                    layer.msg("操作成功！", {icon: 1, time: 1000}, function () {
                        $(".layui-laypage-btn")[0].click();
                    });
                } else {
                    layer.msg('未选择有效数据', {
                        offset: 't',
                        anim: 6
                    });
                }
            });
        })
        */

        $("#addUser").click(function () {
            layer.open({
                title: '添加用户',
                type: 2,
                shade: false,
                maxmin: true,
                shade: 0.5,
                anim: 4,
                area: ['90%', '90%'],
                content: '/users/add',
                zIndex: layer.zIndex,
                // skin: 'layui-layer-molv',
                end: function () {
                    $(".layui-laypage-btn")[0].click();
                }
            });
        });
        //监听状态操作
        form.on('switch(status_switch)', function(obj){
            //layer.msg(this.value+ ' ' + this.name + '：'+ obj.elem.checked);
            
            $.ajax({
                    url: '/users/statuschange',
                    method: 'post',
                    data: {userid:this.value,status:obj.elem.checked?1:0},
                    dataType: 'JSON',
                    success: function (res) {
                        if (res.code == 1) {
                            layer.msg('状态修改成功');
                        } else {
                            layer.msg('状态修改失败');
                            obj.elem.checked=!obj.elem.checked;
                        }
                    },
                    error: function (data) {}
                })
        });        
        
    })
</script>
    <!--模板-->
    <script type="text/html" id="statusTpl">
        <input type="checkbox" name="status" value="{{d.userid}}" lay-filter='status_switch' lay-skin="switch" lay-text="启用|停用" {{ d.status== 1 ? 'checked' : ''}}>
</script>

    <script type="text/html" id="operationTpl">
        <a href="javascript:;" title="重置密码" lay-event="resetpassword" class="layui-btn layui-btn-xs">重置</a>
        <a href="javascript:;" title="权限设置" lay-event="permission" class="layui-btn layui-btn-xs layui-bg-orange">权限</a>
        <!-- <a href="javascript:;" title="删除" lay-event="del"><i class="layui-icon">&#xe640;</i></a> -->
</script>
</body>

</html>